<template>
  <div>
    <x-header
      :left-options="{showBack: false}"
      :right-options="{showMore: true}"
      @on-click-more="showMenus = true"
    >壁纸一览</x-header>
    <div class="mh-scroller-box">
      <scroller :on-refresh="refresh" :on-infinite="infinite" ref="item_scroller">
        <main class="mh-scroller-content">
          <div v-for="(item, i) in items" :key="i" class="mh-item">
            <flexbox orient="vertical">
              <flexbox-item>
                <img width="100%" v-lazy="item.url" :key="item.url" :alt="item.title">
              </flexbox-item>
              <flexbox-item>
                <flexbox>
                  <flexbox-item :span="8">{{item.title}}</flexbox-item>
                  <flexbox-item :span="4">{{item.copyright}}</flexbox-item>
                </flexbox>
              </flexbox-item>
            </flexbox>
          </div>
        </main>
      </scroller>
      <mh-tabbar :badge="items.length.toString()" selectedKey="wallpaper_list"></mh-tabbar>
    </div>
    <div v-transfer-dom>
      <popup v-model="showSearch" height="90%">
        <div class="mh-popup-docs">
          <flexbox>
            <flexbox-item>
              <div>
                <x-input title="关键字" v-model="keyword" placeholder="请输入关键字"></x-input>
              </div>
              <div>
                <x-button @click.native="handleSearch" type="primary">立即搜索</x-button>
              </div>
              <div>
                <x-switch title="关闭查询框" v-model="showSearch"></x-switch>
              </div>
            </flexbox-item>
          </flexbox>
        </div>
      </popup>
    </div>
    <div v-transfer-dom>
      <actionsheet @on-click-menu="clickActionsheet" :menus="menus" v-model="showMenus" show-cancel></actionsheet>
    </div>
  </div>
</template>
<script>
import Api from '@/libs/api'
import qs from 'qs'
import MhTabbar from './MhTabbar'
import { Popup, XInput, XSwitch, XButton, Tabbar, TabbarItem, TransferDom, Flexbox, FlexboxItem, Actionsheet, Divider } from 'vux'
export default {
  directives: {
    TransferDom
  },
  components: {
    'mh-tabbar': MhTabbar,
    Popup,
    XInput,
    XSwitch,
    XButton,
    Tabbar,
    TabbarItem,
    Actionsheet,
    Divider,
    Flexbox,
    FlexboxItem
  },
  data () {
    return {
      noMore: false,
      items: [],
      page: 0,
      pageSize: 5,
      keyword: '',
      menus: {
        menuSearch: '搜索图片',
        menuLogout: '退出登录'
      },
      showMenus: false,
      showSearch: false
    }
  },
  mounted: function () {
  },
  methods: {
    clickActionsheet (key) {
      if (key === 'menuSearch') {
        this.showSearch = true
      }
    },
    handleSearch () {
      this.showSearch = false
      this.refresh()
    },
    refresh () {
      this.page = 1
      this.noMore = false
      this.getData()
    },
    infinite: function (done) {
      if (this.noMore) {
        done(true)
        this.$refs.item_scroller.finishInfinite(true)
      } else {
        this.page++
        var that = this
        that.getData(done)
      }
    },
    // 获取数据，由于是http异步，所以done要放在回调中执行
    getData (done) {
      var that = this
      let params = qs.stringify({
        token: this.$store.state.token,
        page: this.page,
        rows: this.pageSize,
        title: this.keyword
      })
      Api.http
        .get(Api.url.list + '?' + params)
        .then(function (result) {
          if (result.status === 200) {
            for (let idata = 0; idata < result.rows.length; idata++) {
              if (!result.rows[idata].url) {
                result.rows[idata].url = require('../assets/nopicture.png')
              } else {
                result.rows[idata].url = 'http://www.bing.com/' + result.rows[idata].url
              }
            }
            if (that.page === 1) {
              that.items = result.rows
            } else {
              that.items = that.items.concat(result.rows)
            }
            // 这里通过done判断到底是不是refresh操作
            if (typeof done !== 'function') {
              that.$refs.item_scroller.finishPullToRefresh()
            }
            if (result.total <= that.page) {
              // 最后一页没有数据了
              that.noMore = true
              // 判断是infinite
              if (typeof done === 'function') {
                done(true)
                this.$refs.item_scroller.finishInfinite(true)
              }
            } else {
              that.noMore = false
              // 判断是infinite
              if (typeof done === 'function') {
                done()
              }
            }
          }
        })
        .catch(function (message) { })
    }
  }
}
</script>
<style>
@import "../style/main.less";
</style>

